<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<!---
	<script src="https://cdn.bootcss.com/react/16.6.3/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.6.3/umd/react-dom.development.js"></script>
-->
 <script src="./dist/React.js"></script>

	<script type='text/javascript' src="./lib/babel.js"></script>

</head>

<body>

	<div id='root' class="root">

	</div>
	<script type='text/babel'>
        
        var container = document.getElementById('root');
          var div = container;
          if (!window.ReactDOM) {
              window.ReactDOM = React;
          }
          var expect = function(a) {
              return {
                  toBe: function(b) {
                      console.log(a, 'vs', b, a === b);
                  },
                  toEqual(b) {
                      console.log(a, 'vs', b, a + '' === b + '');
                  },
                  toThrow(){
                      try{
                          a()
                      }catch(e){
                          console.log(e,"catch")
                      }
                  }
              };
		 };
  const themes = {
  green: {
    foreground: '#000000',
    background: 'green',
  },
  red: {
    foreground: '#ffffff',
    background: 'red',
  },
};

const ThemeContext = React.createContext(
  themes.red // default value
);
class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
   console.log("ThemedButton", props, theme)
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;

function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.green,
    };
    console.log("变色")
    this.toggleTheme = () => {
      console.log(this.state.theme, '1111')
      this.setState(state => ({
        theme:
          state.theme === themes.red
            ? themes.green
            : themes.red,
      }));
    };
  }

 render() {
    // The ThemedButton button inside the ThemeProvider
    // uses the theme from state while the one outside uses
    // the default red theme
    return (
      <div>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <section>
          <ThemedButton>下面的</ThemedButton>
        </section>
      </div>
    );
  }
}
ReactDOM.render(<App />, container)
	
    </script>


</html>